import './AIText.scss'

import { project } from '../../../../Common/Data'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useState } from 'react'
const { imageUrl } = project[window.location.hostname]

export const AITextA01 = ({ img }) => {
    const [Number, setNumber] = useState({
        A01: { num: 0, color: 'rgba(78, 253, 255, 1)' },
        A02: { num: 0, color: 'rgba(248, 255, 144, 1)' },
        A03: { num: 0, color: 'rgba(105, 255, 144, 1)' },
        A04: { num: 0, color: 'rgba(255, 204, 68, 1)' },
    })

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setNumber({
                A01: { num: 10, color: 'rgba(78, 253, 255, 1)' },
                A02: { num: res.allNum, color: 'rgba(248, 255, 144, 1)' },
                A03: { num: res.positiveNum, color: 'rgba(105, 255, 144, 1)' },
                A04: { num: res.allNum - res.positiveNum || 0, color: 'rgba(255, 204, 68, 1)' },
            })
        },
    })

    useMount(() => {
        runAsync({ url: 'getAIWarningStat' })
    })

    return (
        <div className="AITextA01">
            <img src={imageUrl + img} alt="" />
            <div>
                <div>
                    AI己监控 <span style={{ color: Number.A01.color }}>{Number.A01.num}</span> 天, 发现
                    <span style={{ color: Number.A02.color }}>{Number.A02.num}</span> 条预警.
                </div>
                <div>
                    己处理 <span style={{ color: Number.A03.color }}>{Number.A03.num}</span> 条预警 未处理
                    <span style={{ color: Number.A04.color }}>{Number.A04.num}</span> 条.
                </div>
            </div>
        </div>
    )
}
